<template>
  <div>
    <div style="background-color: #f1f1f1;width: 100%">
      <div class="titleBox">
        <el-button-group class="title">
          <el-button  class="bot" :class="{'check':this.check==1}" style="border-radius:4px 0px 0px 4px;" @click="clikcChart(1)">蓝湾简介</el-button>
          <el-button  class="bot" :class="{'check':this.check==2}" @click="clikcChart(2)">招贤纳士</el-button>
          <!--<el-button  class="bot" :class="{'check':this.check==3}" style="border-radius:0px 4px 4px 0px;" @click="clikcChart(3)">我要合作</el-button>-->
        </el-button-group>
      </div>
    </div>
    <div class="cent">
      <div class="listBox clearfix">
        <!--<div class="title" v-show="fromData.imgUlr">-->
          <!--<el-carousel :interval="4000"  height="300px" ref="carousel" >-->
            <!--<el-carousel-item v-for="(item,index) in fromData.imgUlr" :key="item" name="index" >-->
              <!--<img :src="item">-->
              <!--<h3>{{ item }}</h3>-->
            <!--</el-carousel-item>-->
          <!--</el-carousel>-->
          <!--<div class="suoBox" carousel="carousel">-->
            <!--<div class="imgBox" v-for="(url,index) in fromData.imgUlr" @click="setActiveItem(index)"> <img class="suo" :src="url"/></div>-->
          <!--</div>-->
        <!--</div>-->
        <div class="ditleCent ql-editor" :DetailData="DetailData">
          <div class=" ql-container" v-html="fromData.content">

          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style scoped>
  .titleBox{width:70%;padding:20px;min-width:1000px;max-width: 1200px;margin:auto;text-align: left;height: .6rem;height: .6rem;min-height: 45px}
  .titleBox .title{ }
  .cent{min-height: 6rem;}
  .listBox{ }
  .suoBox{width: 100%;height: .9rem;padding: .2rem 0px}
  .suoBox .imgBox{ width: 1.8rem;height: 1rem;background-color: #e1e1e1;float: left;margin-right: .2rem;overflow: hidden}
  .suoBox .imgBox img{width: 180px;}
  .ditleCent{padding-top: .4rem;min-height: 5rem;margin: auto}
  .ditleCent p{font-size: 12px;color:#343434;line-height: .25rem;text-indent: .2rem;text-align:left;padding-bottom: .2rem}
  .titleText{font-size: .18rem; text-align: center;line-height: .6rem;}
  .time{font-size: 12px; text-align: center;line-height: .2rem;color: #909090}
  .cent{width:70%;background-color:#fff;padding:.3rem .2rem;min-width:1000px;max-width: 1200px;margin:auto}
  .nave{width: 100%;line-height: .3rem;}
  .bot{ background-color: #fff ; color: #333 ;padding-left: .50rem;padding-right: .50rem;font-size: 14px;padding-top: 15px;padding-bottom: 15px;font-weight: bold;font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif}
  .bot:hover{ background-color: #0061a1 ; color: #f1f1f1 }
  .nave p {text-align:left}
  .nave .check{background: #f1f1f1;color:#0061a1;}
  .nave  span:hover{background: #f1f1f1;color:#0061a1;font-size:.14rem;}
  .nave  span{text-align: center; color:#f1f1f1; line-height:.6rem; padding:.05rem .2rem;}
  .ql-container{width: 100%}
  .ql-container img{max-width: 100%}
  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
  }
 .check { background-color: #0061a1 ; color: #f1f1f1 }
  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }

</style>
<script>
  import setPublc from '@/components/public/set.vue'
  import HeaderPublc from '@/components/public/herderIndex.vue'
  import Public from '@/vuex/public'
  import {mapState, mapActions} from 'vuex'
  export default {
    name: 'my-adminChart',
    data () {
      return {
        fromData:{
          intro:'',
          philo:'',
          cooper:'',
          content:'',
          imgUlr:[]
        },
        check:1
      }
    },
    methods: {
      login () {
        this.$router.push({ name: 'map' })
      },
      setActiveItem(index){
        this.$refs.carousel.setActiveItem(index);
      },
      // 选择展示详情
      clikcChart(a){
        this.check = a
        switch (a){
          case 1:
            this.fromData.content = this.fromData.intro;
            break;
          case 2:
            this.fromData.content = this.fromData.philo;
            break;
          case 3:
            this.fromData.content = this.fromData.cooper;
            break;
        }
        // var DOM = document.createElement('div');
        // DOM.innerHTML = this.fromData.content
        // DOM = DOM.childNodes[0]
        // var text = DOM
        // console.log(text,'sfs')
      },
      //详情解析
      dataFn(res){
        res=res.body.data
        var time = Public.publicLo.timeCheng()
        if(res.creatTmie){
          time = Public.publicLo.timeCheng(res.createTime)
        }
        this.fromData={
          intro:res.intro,
          philo:res.philo,
          cooper:res.cooper,
          content:res.intro,
          time: time.times,
          imgUlr: res.homePics
        }
        // var DOM = document.createElement('div');
        // DOM.innerHTML = this.fromData.content
        // DOM = DOM.childNodes[0]
        // var text = DOM.innerText
        // console.log(text)
      }
    },
    computed: {
      DetailData() {
        var parm = this.Detail
        if (parm) {
          this.dataFn(parm)
        }
        return 1
      },
      ...mapState([
        'Detail',
        'updateStatus',
        'language',
        'show'
      ])
    },
    mounted () {
      // var width = document.body.clientWidth;
      // var dom = document.getElementById('main');
      // var w = width-240;
      // dom.style = 'max-width:'+ w +'px';
    },
    components: {
      HeaderPublc: HeaderPublc,
      setPublc:setPublc,
    }
  }
</script>

